<template>
  <!-- 这是首页导航栏 -->
  <div class="header">
    <!-- 左侧导航 -->
    <!-- 学生 首页 课程 向老师 -->
    <div class="navbar">
      <div @click="$router.push({ name: 'Home' })">首页</div>
      
      <div @click="$router.push({ name: 'UserHome' })">个人中心</div>
      <!-- <div>学习</div>
      <div>在线答疑</div> -->
      <div v-if="userStore.userInfo.role == '学生'"  @click="$router.push({ name: 'Student' })">学生中心</div>
      <div v-if="userStore.userInfo.role == '教师'" @click="$router.push({ name: 'Teacher' })">教师中心</div>
      <div v-if="userStore.userInfo.role == '教师'" @click="$router.push({name:'CourseMgmt'})">课程管理</div>

    </div>

    <!-- 右侧导航 -->
    <div class="navbarRight">
      <!-- 通知弹出按钮 el-tooltip提示-->
      <el-tooltip effect="light" content="通知">
        <img @click="drawer = true" src="/src/assets/svg/comment.svg" class="icon-img">
      </el-tooltip>

      <!-- 用户头像 -->
      <img :src="userStore.userInfo.profilePic" class="titleImg" />
      <div class="userName">
        {{ userStore.userInfo.nickName }}
      </div>

      <div class="quit">
        <el-tooltip effect="light" content="退出登录">
          <img src="/src/assets/svg/logout.svg" class="tuichu" @click="quit()">
        </el-tooltip>
      </div>




    </div>
  </div>


  <!-- 设置弹出框------------------- -->
  <el-drawer v-model="drawer" :with-header="false" size="40%" style="border-radius: 20px 0 0 20px;">
    <!-- 通知栏组件 -->
    <notice></notice>
  </el-drawer>

</template>

<script setup>
import { ref } from "vue";
import useUserStore from "@/stores/useUserStore";
import Notice from "./Notice.vue";
import { useRouter } from "vue-router";
import { openInfo } from "@/utils/openInfo";
const router = useRouter()
const userStore = useUserStore()

// 通知弹出框
const drawer = ref(false)







//t退出登录
function quit(){
  userStore.removeUserInfo()
  router.push({name:"LoginRegister"})
  openInfo("退出登录成功")
}




</script>

<style scoped>
/* 整条导航栏 */
.header {
  min-width: 800px;
  height: 50px;
  position: sticky;
  top: 1px;
  /* 元素将粘在页面顶部 */
  margin-left: 2px;
  margin-right: 2px;
  border-radius: 5px;
  backdrop-filter: blur(5px);
  /*模糊 */
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px rgba(255, 251, 226, 0.2) solid;
}

/* 左侧导航 */
.navbar {
  width: 60%;
  display: flex;
}

/* 左侧每一项导航 */
.navbar div {
  height: 50px;
  width: 120px;
  min-width: 100px;
  color: #434746;
  text-decoration: none;
  font-size: 18px;
  border-radius: 5px;
  font-family: "楷体";
  transition: font-size 0.5s ease;
  /* 使div中的内容居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  /*变手指 */
  user-select: none;
  /*无法选中 */
}

/*  */
.navbar div:hover {
  font-size: 24px;
}

/* 右侧头像 */
.logo {
  color: #cd7474;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
}

/* 导航栏右侧 */
.navbarRight {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 导航栏右侧字体 还要改 */
.navbarRight div {
  height: 50px;
  color: #434746;
  text-decoration: none;
  font-size: 18px;
  border-radius: 5px;
  font-family: "楷体";
  transition: font-size 0.5s ease;
  /* 使div中的内容居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  /*变手指 */
  user-select: none;
  /*无法选中 */
}

.navbarRight div:hover {
  font-size: 24px;
}

/* 头像 */
.titleImg {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  margin-right: 10px;
}

/* 用户名 */
.userName {
  margin-right: 10px;
}

.quit {
  margin-right: 15px;
}

/* 通知按钮 */
.icon-img {
  margin-right: 15px;
  transition: transform 0.3 ease;
  cursor: pointer;
}

.icon-img:hover {
  font-size: 24px;
  transform: scale(1.1);
}

/* 关闭弹窗键 */
.tuichu {
  transition: transform 0.3s ease;
  cursor: pointer;
  margin-left: 10px;
}

.tuichu:hover {
  transform: scale(1.2);
}
</style>